<template>
  <div class="teacher-detail-container">
    <!-- 顶部导航栏 -->
    <header class="detail-header">
      <button class="back-btn" @click="goBack">
        <span class="back-icon">‹</span>
        返回
      </button>
    </header>

    <!-- 个人信息区域 -->
    <main class="detail-main">
      <!-- 头像和姓名区域 -->
      <div class="detail-header-info">
        <h2 class="teacher-name" :class="{ 'loading-text': loading }" >
          {{ loading ? '加载中...' : (teacherInfo?.realName || '教师') }}
        </h2>
        <div class="avatar-placeholder">
          <span class="avatar-text">{{ avatarInitial }}</span>
        </div>
      </div>
      
      <!-- 基本信息卡片 -->
      <div class="info-card">
        <!-- 基本信息 -->
        <div class="info-item">
          <span class="info-label">工 号：</span>
          <span class="info-value" :class="{ 'loading-text': loading }">
            {{ loading ? '加载中...' : (teacherInfo?.employeeId || '暂无') }}
          </span>
        </div>
        <div class="info-item">
          <span class="info-label">手 机 号：</span>
          <span class="info-value" :class="{ 'loading-text': loading }">
            {{ loading ? '加载中...' : (teacherInfo?.phone || '暂无') }}
          </span>
        </div>
        <div class="info-item">
          <span class="info-label">邮 箱：</span>
          <span class="info-value" :class="{ 'loading-text': loading }">
            {{ loading ? '加载中...' : (teacherInfo?.email || '暂无') }}
          </span>
        </div>
        <div class="info-item">
          <span class="info-label">专业职位：</span>
          <span class="info-value" :class="{ 'loading-text': loading }">
            {{ loading ? '加载中...' : (teacherInfo?.professionalTitle || '暂无') }}
          </span>
        </div>
        <div class="info-item">
          <span class="info-label">身份证号：</span>
          <span class="info-value" :class="{ 'loading-text': loading }">
            {{ loading ? '加载中...' : (teacherInfo?.idCard || '暂无') }}
          </span>
        </div>
      </div>

      <!-- 个人主页地址容器 -->
      <div class="homepage-card" v-if="teacherInfo?.personalHomepage">
        <div class="info-item">
          <span class="info-label">个人主页地址：</span>
          <div class="homepage-content">
            <span class="homepage-url" :class="{ 'loading-text': loading }">
              {{ loading ? '加载中...' : (teacherInfo?.personalHomepage || '暂未设置') }}
            </span>
          </div>
        </div>
      </div>

      <!-- 功能按钮区 - 只保留个人主页 -->
      <div class="action-buttons">
        <button class="action-btn primary" @click="goToPersonalHomepage" v-if="teacherInfo?.personalHomepage">个人主页</button>
      </div>

      <!-- 获奖情况 -->
      <div class="section-card" v-if="awards.length > 0">
        <div class="section-header">
          <h3 class="section-title">获奖情况：</h3>
          <span class="count-badge">{{ totalAwards }}项</span>
        </div>
        <div v-if="loading" class="loading-container">
          <div class="loading-text">加载中...</div>
        </div>
        <div v-else class="experience-list">
          <div 
            v-for="award in awards" 
            :key="award.id"
            class="experience-item"
          >
            <div class="experience-title">{{ award.awardName }}</div>
            <div class="experience-subtitle">{{ award.awardLevel }} - {{ award.awardTime }}</div>
            <div class="experience-organization" v-if="award.awardingOrganization">颁奖机构：{{ award.awardingOrganization }}</div>
            <div class="experience-description" v-if="award.awardDescription">{{ award.awardDescription }}</div>
          </div>
        </div>
      </div>

      <!-- 参赛经历 -->
      <div class="section-card" v-if="competitions.length > 0">
        <div class="section-header">
          <h3 class="section-title">参赛经历：</h3>
          <span class="count-badge">{{ totalCompetitions }}项</span>
        </div>
        <div v-if="loading" class="loading-container">
          <div class="loading-text">加载中...</div>
        </div>
        <div v-else class="experience-list">
          <div 
            v-for="competition in competitions" 
            :key="competition.id"
            class="experience-item"
          >
            <div class="experience-title">{{ competition.competitionName }}</div>
            <div class="experience-subtitle">{{ competition.competitionLevel }} - {{ competition.participationRole }}</div>
            <div class="experience-time">时间：{{ competition.startTime }} 至 {{ competition.endTime }}</div>
            <div class="experience-result" v-if="competition.result">比赛结果：{{ competition.result }}</div>
            <div class="experience-description" v-if="competition.description">{{ competition.description }}</div>
          </div>
        </div>
      </div>

      <!-- 项目经历 -->
      <div class="section-card" v-if="projects.length > 0">
        <div class="section-header">
          <h3 class="section-title">项目经历：</h3>
          <span class="count-badge">{{ totalProjects }}项</span>
        </div>
        <div v-if="loading" class="loading-container">
          <div class="loading-text">加载中...</div>
        </div>
        <div v-else class="experience-list">
          <div 
            v-for="project in projects" 
            :key="project.id"
            class="experience-item"
          >
            <div class="experience-title">{{ project.projectName }}</div>
            <div class="experience-subtitle">{{ project.projectRole }}</div>
            <div class="experience-time">时间：{{ project.startTime }} 至 {{ project.endTime }}</div>
            <div class="experience-technology" v-if="project.technologiesUsed">技术栈：{{ project.technologiesUsed }}</div>
            <div class="experience-url" v-if="project.projectUrl">
              项目链接：<a :href="project.projectUrl" target="_blank" class="project-link">{{ project.projectUrl }}</a>
            </div>
            <div class="experience-description" v-if="project.projectDescription">{{ project.projectDescription }}</div>
          </div>
        </div>
      </div>

      <!-- 空状态提示 -->
      <div v-if="!loading && awards.length === 0 && competitions.length === 0 && projects.length === 0" class="empty-experience">
        <div class="empty-icon">📋</div>
        <div class="empty-text">该教师暂无相关经历信息</div>
      </div>
    </main>

    <!-- 消息提示弹窗 -->
    <div v-if="showMessageModal" class="modal-overlay" @click="closeMessageModal">
      <div class="modal-content" @click.stop>
        <div class="modal-header error-header">
          <h3>加载失败</h3>
          <button class="close-btn" @click="closeMessageModal">×</button>
        </div>
        <div class="modal-body">
          <div class="icon-wrapper">
            <div class="message-icon error-icon">✗</div>
          </div>
          <p class="modal-text">{{ errorMessage }}</p>
        </div>
        <div class="modal-footer">
          <button class="confirm-btn" @click="closeMessageModal">确定</button>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { computed, ref, onMounted } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import { getTeacherCompleteInfoService } from '@/api/teacher.js'

const router = useRouter()
const route = useRoute()

// 数据加载状态
const loading = ref(false)

// 消息提示弹窗控制
const showMessageModal = ref(false)
const errorMessage = ref('')

// 教师信息数据
const teacherInfo = ref(null)
const awards = ref([])
const competitions = ref([])
const projects = ref([])
const totalAwards = ref(0)
const totalCompetitions = ref(0)
const totalProjects = ref(0)

// 头像首字母
const avatarInitial = computed(() => {
  if (loading.value) return '...'
  const name = teacherInfo.value?.realName || '教师'
  return name.charAt(0)
})

// 页面挂载时获取教师信息
onMounted(async () => {
  const employeeId = route.params.employeeId
  if (employeeId) {
    await fetchTeacherCompleteInfo(employeeId)
  } else {
    showErrorMessage('教师工号参数缺失')
  }
})

// 获取教师完整信息
const fetchTeacherCompleteInfo = async (employeeId) => {
  loading.value = true
  try {
    const result = await getTeacherCompleteInfoService(employeeId)
    
    if (result.code === 200) {
      const data = result.data
      
      teacherInfo.value = data.basicInfo
      awards.value = data.awards || []
      competitions.value = data.competitions || []
      projects.value = data.projects || []
      totalAwards.value = data.totalAwards || 0
      totalCompetitions.value = data.totalCompetitions || 0
      totalProjects.value = data.totalProjects || 0
    } else {
      console.error('获取教师完整信息失败:', result.msg)
      showErrorMessage(result.msg || '获取教师信息失败')
    }
  } catch (error) {
    console.error('获取教师完整信息异常:', error)
    showErrorMessage('获取教师信息时发生错误')
  } finally {
    loading.value = false
  }
}

// 返回上一页
const goBack = () => {
  router.go(-1)
}

// 显示错误消息
const showErrorMessage = (text) => {
  errorMessage.value = text
  showMessageModal.value = true
}

// 关闭消息弹窗
const closeMessageModal = () => {
  showMessageModal.value = false
}

// 个人主页跳转
const goToPersonalHomepage = () => {
  const homepage = teacherInfo.value?.personalHomepage
  if (homepage) {
    // 如果地址不包含协议，自动添加https://
    const url = homepage.startsWith('http') ? homepage : `https://${homepage}`
    window.open(url, '_blank')
  } else {
    showErrorMessage('该教师未设置个人主页地址')
  }
}
</script>

<style scoped lang="scss">
@import '@/assets/css/teacher-detail.css';
</style>